<template>
    <div class="form-container">
      <a-form
        :model="formState"
        name="register"
        class="centered-form"
        :label-col="{ span: 24 }"
        :wrapper-col="{ span: 20 }"
        autocomplete="off"
        @finish="onFinish"
      >
        <a-form-item
          label="手机号"
          name="mobile"
          :rules="[{ required: true, message: '请输入手机号!' }]"
        >
          <a-input v-model:value="formState.mobile" />
        </a-form-item>
  
        <a-form-item
          label="密码"
          name="password"
          :rules="[{ required: true, message: '请输入密码!' }]"
        >
          <a-input-password v-model:value="formState.password" />
        </a-form-item>
  
        <a-form-item
          label="确认密码"
          name="confirmPassword"
          :rules="[{ required: true, message: '请再次输入密码!' }]"
        >
          <a-input-password v-model:value="formState.confirmPassword" />
        </a-form-item>
  
        <a-form-item
          label="姓名"
          name="name"
          :rules="[{ required: true, message: '请输入姓名!' }]"
        >
          <a-input v-model:value="formState.name" />
        </a-form-item>
  
        <a-form-item :wrapper-col="{ span: 24 }">
          <a-button type="primary" html-type="submit" block>注册管理员</a-button>
        </a-form-item>
  
        <a-form-item :wrapper-col="{ span: 24 }">
          <div class="text-center">
            <a @click="$router.push('/admin/login')">返回登录</a>
          </div>
        </a-form-item>
      </a-form>
    </div>
  </template>
  
  <script setup>
  import { reactive } from 'vue';
  import axios from 'axios';
  import { message } from 'ant-design-vue';
  import { useRouter } from 'vue-router';
  
  const router = useRouter();
  const formState = reactive({
    mobile: '',
    password: '',
    confirmPassword: '',
    name: ''
  });
  
  const onFinish = async () => {
    try {
      // 验证密码一致性
      if (formState.password !== formState.confirmPassword) {
        message.error('两次输入的密码不一致');
        return;
      }
  
      const response = await axios.post('/admin/register', {
        mobile: formState.mobile,
        password: formState.password,
        name: formState.name,
        password_confirmation: formState.confirmPassword
      });
  
      message.success('管理员注册成功');
      router.push('/admin/login'); // 注册成功后跳转到登录页
    } catch (error) {
      message.error(error.response?.data?.message || '注册失败');
    }
  };
  </script>
  
  <style scoped>
  @import "../../css/example.css";
  .text-center {
    text-align: center;
  }
  </style>